<template>
	<view>
		<u-toast ref="uToast" />
		<view class="wrap">
			<view class="plateN-title">
				<view class="" style="display: flex;">
					<view class="bg-purple-title">
						<img src="/static/jeesite/tabbar/yonghu.png" class='bg-purple-i-title' alt="" srcset="">
					</view>
					<view class="bg-purple-light-title">
						<view class="" style="display: flex;justify-content: space-between;">
							<view class="">
								<view class="">
									<span style='font-weight: bold;'>{{userName}}</span>
								</view>
								<view class="bg-bao-light-title-box">
									<img src="/static/jeesite/tabbar/che.png" class='bg-bao-light-title-i' alt=""
										srcset="">
									&nbsp; <span style='font-weight: bold;'>{{currentStore}}</span>

								</view>

							</view>

							<view class="plateN-title-a">
								<view class="" style="margin-top: 10rpx;" @click="switchCarTo" hover-class='hover'>
									<span style='font-size: 28rpx;color: #1296db;'>切换门店</span> <img
										src="/static/jeesite/tabbar/Rrl_s_138.png" class='bg-bao-light-title-r' mode="">
								</view>

							</view>
						</view>

					</view>
				</view>
			</view>
			<view style="margin-top: 50rpx;">
				<view class="titleT">
					<view class="titleT-b"></view>
					<view class="" style="margin-left: 20rpx;">
						工作任务
					</view>
				</view>
				<view class="plateNt">
				<!-- 	<u-cell-group>
						<u-cell border-bottom="false" border-top="false" @click="changeTrack('待跟踪')" title="待跟踪"
							:isLink="true" :value="dataList.one">
						</u-cell>
						<u-cell border-gap title="跟踪中" :isLink="true" @click="changeTrack('跟踪中')" :value="dataList.two">
						</u-cell>
						<u-cell border-gap title="再次跟踪中" :isLink="true" @click="changeTrack('再次跟踪中')"
							:value="dataList.three">
						</u-cell>
						<u-cell border-gap title="战败" :isLink="true" @click="changeTrack('战败')" :value="dataList.four">
						</u-cell>
						<u-cell border-gap title="已转工单" :isLink="true" @click="changeTrack('已转工单')"
							:value="dataList.five">
						</u-cell>
					</u-cell-group> -->


					<u-grid :col="3" :border="true">
						<u-grid-item @click="changeTrack('待跟踪')">
							<u-badge :value="dataList.one" type="success" :offset="[0,10]" :absolute="true"></u-badge>
							<u-icon name="clock" :size="46" ></u-icon>
							<view class="grid-text">待跟踪</view>
						</u-grid-item>
						<u-grid-item @click="changeTrack('跟踪中')">
							<u-badge :value="dataList.two" type="success" :offset="[0,10]" :absolute="true"></u-badge>
							<u-icon name="calendar" :size="46"></u-icon>
							<view class="grid-text">跟踪中</view>
						</u-grid-item>
						<u-grid-item @click="changeTrack('再次跟踪中')" >
							<u-badge :value="dataList.three" type="success" :offset="[0,10]" :absolute="true"></u-badge>
							<u-icon name="order" :size="46"></u-icon>
							<view class="grid-text">再次跟踪中</view>
						</u-grid-item>
						<u-grid-item @click="changeTrack('战败')">
							<u-badge :value="dataList.four" type="success" :offset="[5,10]" :absolute="true"></u-badge>
							<u-icon name="close-circle" :size="46" :top="5"></u-icon>
							<view class="grid-text">战败</view>
						</u-grid-item>
						<u-grid-item @click="changeTrack('已转工单')">
							<u-badge :value="dataList.five" type="success" :offset="[5,10]" :absolute="true"></u-badge>
							<u-icon name="checkmark-circle" :size="46" :top="5"></u-icon>
							<view class="grid-text">已转工单</view>
						</u-grid-item>
						<u-grid-item @click="changeTrack('已结算')">
							<u-badge :value="dataList.six" type="success" :offset="[5,10]" :absolute="true"></u-badge>
							<u-icon name="lock" :size="46" :top="5"></u-icon>
							<view class="grid-text">已结算</view>
						</u-grid-item>
					</u-grid>
					
					

				</view>
			</view>
		</view>










	</view>

</template>
<script>
	import store from '@/store/index.js';
	var objData = {
		one: '',
		two: '',
		three: '',
		four: '',
		five: '',
		six: ''
	}
	export default {

		data() {
			return {
				currentStore: '',
				userName: '',
				dataList: {
					one: '',
					two: '',
					three: '',
					four: '',
					five: '',
					six: ''
				}
			}
		},
		onLoad() {

		},

		async onShow() {
			var that = this


			if (!store.state.userListName.userCode) {
				that.$refs.uToast.error('信息丢失,请重新登录!')
				setTimeout(function() {
					uni.redirectTo({
						url: '/pages/sys/start/index'
					})
				}, 1000)
				return
			}



			that.currentStore = store.state.userList.companyName
			that.userName = store.state.userListName.userName
			that.dataList = JSON.parse(JSON.stringify(objData))
			var that = this
			that.$request('getMyClueCount', {
				userCode: store.state.userListName.userCode
				// userCode: uni.getStorageSync('changeUserList').userCode
				// userCode: '06273'
			}, 'get').then(res2 => {
				if (res2.code == 200) {
					that.list = res2.data
					// that.$refs.uToast.success(`${res2.message}`)
					// uni.$u.toast(`${res2.message}`)
					res2.data.forEach(i => {




						if (i.CLUENAME == '待跟踪') {
							that.dataList.one = i.CLUECOUNT
						} else if (i.CLUENAME == '跟踪中') {
							that.dataList.two = i.CLUECOUNT
						} else if (i.CLUENAME == '再次跟踪中') {
							that.dataList.three = i.CLUECOUNT
						} else if (i.CLUENAME == '战败') {
							that.dataList.four = i.CLUECOUNT
						} else if (i.CLUENAME == '已转工单') {
							that.dataList.five = i.CLUECOUNT
						} else if (i.CLUENAME == '已结算') {
							that.dataList.six = i.CLUECOUNT
						}
						
						
					})
					
					console.log(that.dataList )
				} else {
					that.$refs.uToast.error(`${res2.message}`)
				}
			})

		},
		methods: {
			//切换车辆
			switchCarTo() {
				uni.navigateTo({
					url: '/pagesA/index/switchCar'
				})
			},
			changeTrack(e) {
				uni.navigateTo({
					url: '/pagesA/index/workTrack?name=' + e

				})
			},


			getListData() {
				var that = this

			}

		}
	};
</script>
<style lang="scss" scoped>
	.bg-bao-light-title-box {
		// width: 240rpx;
		height: 50rpx;
		line-height: 50rpx;

		// color: #f4f5f5;
		font-size: 28rpx;
		text-align: center;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}

	.bg-bao-light-title-box-t {
		width: 120rpx;
		height: 50rpx;
		line-height: 50rpx;
		border: 1rpx solid #6d6d6d;
		// background-color: #367dee;
		// color: #f4f5f5;
		font-size: 28rpx;
		text-align: center;
		border-radius: 10rpx;
		margin-top: 20rpx;

		.bg-bao-light-title-box-r {
			width: 35rpx;
			height: 35rpx;
			margin-top: -8rpx;
			// margin-left: 4rpx;
			vertical-align: middle;
			margin-left: 10rpx;
		}
	}

	.hover {
		background: #efefef;
	}

	.bg-bao-light {
		width: 315rpx;
		height: 100rpx !important;
		border-radius: 50rpx !important;
		background-color: #367dee;
		text-align: center;
		margin-left: 18rpx;
		color: #f5f5f5;
		line-height: 100rpx;

		.bg-bao-light-i {
			width: 50rpx;
			height: 50rpx;
			// line-height: 100rpx;
			margin-top: -10rpx;
			vertical-align: middle;
		}

	}

	.bg-bao {
		width: 315rpx;
		height: 100rpx !important;
		border-radius: 50rpx !important;
		background-color: #f88f37;
		text-align: center;
		margin-left: 18rpx;
		color: #f5f5f5;
		line-height: 100rpx;

		.bg-bao-i {
			width: 50rpx;
			height: 50rpx;
			// line-height: 100rpx;
			margin-top: -10rpx;
			vertical-align: middle;
		}
	}

	.titleT {
		height: 70rpx;
		margin-left: -25rpx;
		font-weight: bold;
		display: flex;

		.titleT-b {
			height: 42rpx;
			width: 14rpx;
			background-color: aqua;
		}
	}

	.wrap {

		width: 100%;
		overflow-x: hidden;
		padding: 25rpx;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;

	}

	.demo-layout {
		height: 25px;
		border-radius: 4px;
	}

	.bg-purple {

		width: 76rpx;
		height: 76rpx;
		background: #6e8ef0;
		border-radius: 4px;

		.bg-purple-i {
			width: 60%;
			height: 60%;
			margin-left: 50%;
			margin-top: 50%;
			transform: translate(-50%, -50%);
		}

	}

	.bg-purple-light {
		color: #6d6d6d;
		// font-size: 26rpx;
	}

	.bg-purple-dark {
		width: 76rpx;
		height: 76rpx;

		.bg-purple-dark-i {
			width: 60%;
			height: 60%;
			margin-left: 50%;
			margin-top: 50%;
			transform: translate(-50%, -50%);
		}
	}

	.plateN {
		height: 80rpx;
		line-height: 80rpx;
		box-shadow: 4px 4px 15px #f5f5f5;
		margin-bottom: 50rpx;
	}

	.plateN-title {
		height: 180rpx;
		// width: 100%;
		box-shadow: 4px 4px 15px #f5f5f5;
		margin-bottom: 30rpx;
		// .plateN-title-a{
		// 	margin-right: 30rpx;
		// }

		.bg-purple-title {
			height: 150rpx;
			width: 150rpx;
			margin-left: 30rpx;
			background-color: #f4f5f5;

			.bg-purple-i-title {
				width: 60%;
				height: 60%;
				margin-left: 50%;
				margin-top: 50%;
				transform: translate(-50%, -50%);
			}
		}

		.bg-purple-light-title {
			width: 580rpx;
			margin: 20rpx 20rpx 0 20rpx;

			// width: 100%;
			.bg-bao-light-title-i {
				width: 50rpx;
				height: 50rpx;
				// line-height: 100rpx;
				margin-top: -10rpx;
				margin-right: 10rpx;
				vertical-align: middle;
			}
		}

		.bg-bao-light-title-r {
			width: 40rpx;
			height: 40rpx;
			margin-top: -2rpx;
			// margin-left: 4rpx;
			vertical-align: middle;
		}
	}
	
	 // .swiper {
	 //        height: 720rpx;
	 //    }
	
	    .grid-text {
	        font-size: 14px;
	        color: #909399;
	        padding: 20rpx 0 20rpx 0rpx;
	        /* #ifndef APP-PLUS */
	        box-sizing: border-box;
	        /* #endif */
	    }
</style>